<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>职员查询</title>
		<link rel="stylesheet" href="../layui/css/layui.css" media="all">
	</head>
	<body>
		<table class="layui-hide" id="test" lay-filter="test"></table>

		<script type="text/html" id="toolbarDemo">
			<div class="layui-form-item" style="margin-bottom: -3px;">
					<div class="layui-inline">
						<input id="empSeekInfo" class="layui-input" type="text" placeholder="职工编号/职工姓名" />
					</div>
					<div class="layui-inline">
						<button id="btnSearch" class="layui-btn layui-btn-sm" lay-event="empSeekInfo"><i class="layui-icon">&#xe615;</i>搜索</button>
					</div>
					<div class="layui-inline">
						<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
					</div>
					<div class="layui-inline">
						<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
					</div>
					<div class="layui-inline">
						<button class="layui-btn layui-btn-sm" lay-event="empAdd">添加职员</button>
					</div>
				</div>
		</script>

		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>

		<script src="../layui/layui.js" charset="utf-8"></script>

		<!-- 加载入口文件 -->
		<script>
			layui.config({
				base: '../layui/lay/modules/' //你存放新模块的目录，注意，不是layui的模块目录
			}).use('empsoftdel'); //加载入口
		</script>


		<script>
			// 要使用的layui模块
			layui.use(['layer', 'form', 'table', 'laydate', 'element', 'empsoftdel'], function() {
				var layer = layui.layer; // 获得layer模块
				var form = layui.form; // 获得form模块
				var table = layui.table; // 获得table模块
				var laydate = layui.laydate; // 获得laydate模块
				var element = layui.element; // 获得element模块（和导航、tab等有关）
				var $ = layui.$ // 调用JQuery方法时
				var laytpl = layui.laytpl;
				var empsoftdel = layui.empsoftdel; // 获取自己封装的ajax模块



				//第一个实例
				table.render({
					elem: '#test' // 给table设置id或class，方便layui调用该元素
						,
					height: 'full-50' // 窗口高度-100
						,
					url: 'http://localhost:9000/application/empAll' // 数据接口
						,
					method: 'post' //如果无需自定义HTTP类型，可不加该参数
						,
					page: true // 开启分页
						,
					autoSort: false,
					limit: 20 // 默认页大小
						,
					limits: [10, 20, 30, 50, 100] //自定义可选分页大小
						,
					cellMinWidth: 80 // 全局定义常规单元格的最小宽度，layui 2.2.1 新增
						,
					sort: true, // 开启排序
					skin: 'line' // 行边框风格
						// ,even: true // 开启隔行背景
						// ,size: 'sm' // 小尺寸的表格
						,
					totalRow: false // 开启合计功能
						,
					toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
						,
					xhrFields: {
						withCredentials: true
					},
					//自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
					defaultToolbar: ['filter', 'exports', 'print', { // 列过滤、导出按钮、打印按钮
						title: '提示',
						layEvent: 'LAYTABLE_TIPS',
						icon: 'layui-icon-tips'
					}],

					title: '职员信息表' // 表名
						// 列信息
						,
					parseData: function(res) { //res 即为原始返回的数据
						return {
							"code": res.code, //解析接口状态
							"msg": res.message, //解析提示文本
							"count": res.data.count, //解析数据长度
							"data": res.data.data //解析数据列表
						};
					},
					done: function(res) {
						// alert(res.code);
						// if (res.code != 0) {
						// 	layer.msg("请输入有效的信息", {

						// 	});
						// }

					},
					cols: [
						[ //表头
							// {type:'radio', fixed: 'left'} // 开启单选框
							{
								type: 'checkbox',
								// fixed: 'left'
							} // 开启复选框
							, {
								field: 'eiid',
								title: 'ID',
								// fixed: 'left',
								sort: true,
								width: 80,

							}, {
								field: 'employeeCode',
								title: '职员编号',
								sort: true,
							}, {
								field: 'employeeName',
								title: '职员姓名',
								sort: true,
							}, {
								field: 'department',
								title: '部门',
								sort: true,
							}, {
								field: 'position',
								title: '职位',
								sort: true,

							}, {
								field: 'gender',
								title: '性别',
								sort: true,
							}, {
								field: 'birthday',
								title: '出生日期',
								sort: true,
							}, {
								fixed: 'right',
								title: '操作',
								toolbar: '#barDemo',
								// width: 150
							}
						]
					]
				});

				// 服务器排序
				table.on('sort(test)', function(obj) { //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
					console.log(obj.field); //当前排序的字段名
					console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
					console.log(this); //当前排序的 th 对象
					;
					table.reload('test', {

						initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
							,
						where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
							sidx: obj.field //排序字段
								,
							sord: obj.type, //排序方式

						}
					});
				});


				// 查询用对象
				var MgrSettle = {
					tableId: "test", //表格id
					condition: {
						customer: "",
						timerange: ""
					}
				};

				// 查询请求内容
				MgrSettle.search = function() {
					var queryData = {};
					queryData['empSeekInfo'] = $("#empSeekInfo").val();
					table.reload(MgrSettle.tableId, {
						where: queryData,

					});
				};


				// 监听行双击事件
				table.on('rowDouble(test)', function(obj) {
					console.log(obj.tr) //得到当前行元素对象
					console.log(obj.data) //得到当前行数据
				});




				// 复选框监听
				table.on('checkbox(test)', function(obj) {
					console.log(obj.checked); //当前是否选中状态
					console.log(obj.data); //选中行的相关数据
					console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
				});

				//头工具栏事件
				table.on('toolbar(test)', function(obj) {
					var checkStatus = table.checkStatus(obj.config.id);

					// var empSeekInfo = $("#empSeekInfo").val();
					switch (obj.event) {
						case 'empSeekInfo':
							// 触发搜索事件
							MgrSettle.search();
							break;
						case 'getCheckData':
							var data = checkStatus.data;
							layer.alert(JSON.stringify(data));
							break;
						case 'getCheckLength':
							var data = checkStatus.data;
							layer.msg('选中了：' + data.length + ' 个');
							break;
						case 'isAll':
							layer.msg(checkStatus.isAll ? '全选' : '未全选');
							break;
							// 职员添加跳转页面
						case 'empAdd':
							layer.open({
								type: 2,
								title: '职员添加',
								skin: 'layui-layer-molv',
								area: ['60%', '90%'], //宽高
								content: 'empAdd.html'
							});
							break;
							//自定义头工具栏右侧图标 - 提示
						case 'LAYTABLE_TIPS':
							layer.alert('这是工具栏右侧自定义的一个图标按钮');
							break;
					};
				});

				//监听工具条
				table.on('tool(test)', function(obj) {
					var data = obj.data;
					if (obj.event === 'del') {
						layer.confirm('确定删除编号为  [' + data.employeeCode + ']  的员工数据？', function(index) {
							obj.del();
							layer.close(index);
							empsoftdel.ajax('http://localhost:9000/application/empDel', 'post', 'json', {
								"empDelId": data.eiid,
							}, function(res) {
								if (res.code == 0) {
									layer.msg(JSON.stringify(res.message), {

									});
								} else {
									layer.msg("编号为：" + data.employeeCode + "的员工删除失败,请联系后台管理员", {

									});

									setTimeout(function() {
										window.location.href = "warning.html";
									}, 3000);
								}
								// alert(JSON.stringify(res));
							});
						});
					} else if (obj.event === 'edit') {
						var eiid = data.eiid;
						layer.open({
							type: 2,
							title: '职员信息编辑',
							skin: 'layui-layer-molv',
							area: ['60%', '90%'], //宽高
							content: '/application/html/empUpdate.html',
							success: function(layero, index) {
								var body = layer.getChildFrame('body', index); //得到产品查询层的BODY
								body.find('#hidValue').val(JSON.stringify(data)); //将本层的窗口索引传给产品查询层的hidValue中
							},
						});
					}
				});
			});
		</script>
	</body>
</html>
